﻿<div class="blade-static __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/wizards/newProduct/new-product-wizard-actions.tpl.html'"></div>
<div class="blade-content">
    <div class="blade-inner">
        <div class="inner-block">
            <form class="form" name="detailForm">
                <div class="form-group" ng-init="setForm(detailForm)">
                    <label class="form-label">SKU</label>
                    <div class="form-input">
                        <input required class="form-control" name="code" ng-model="blade.item.code" ng-class="{'error': detailForm.code.$invalid && !detailForm.code.$pristine}" placeholder="Enter item sku" ui-validate=" 'codeValidator($value)' " />
                    </div>
                    <div class="form-error" ng-if="detailForm.code.$dirty">
                        <span data-ng-show="detailForm.code.$error.required">Required</span>
                        <span data-ng-show="detailForm.code.$error.validator">SKU can't contain $+;=%{}[]|\/@ ~#!^*&()?:'<>, characters</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Name</label>
                    <div class="form-input">
                        <textarea name="productName" required class="form-control" cols="30" rows="3" ng-model="blade.item.name" ng-class="{'error': detailForm.productName.$invalid && !detailForm.productName.$pristine}" placeholder="Enter item name"></textarea>
                    </div>
                    <div class="form-error" ng-if="detailForm.productName.$dirty && detailForm.productName.$invalid">
                        <span ng-if="detailForm.productName.$error.required">Required</span>
                    </div>
                </div>
            </form>

            <ul class="list __items">
                <li class="list-item" ng-click="openBlade('properties')" ng-if="blade.item.properties.length > 0">
                    <i class="list-ico fa fa-cogs"></i>
                    <span class="list-t">Add properties</span>
                    <span class="list-descr">{{ getUnfilledProperties().length }} of {{blade.item.properties.length}} properties filled</span>
                </li>
                <li class="list-item" ng-click="openBlade('images')">
                    <i class="list-ico fa fa-image"></i>
                    <span class="list-t">Upload images</span>
                    <span class="list-descr">{{blade.item.images.length >= 0 ? blade.item.images.length : 0}} image(s) uploaded</span>
                </li>
            </ul>
        </div>
    </div>
</div>